<template>
   <div id="jiazu_detail" class="w1008 m0auto">
        <div class="flex-dire-row id_style ">
            <span>家族ID:{{jiazuRoomId.family_id}}</span>
            <span>家族成员（{{jiazuRoomId.family_num}}）</span>
        </div>
       <div style="width: 100%;margin-bottom: 1.296296rem;">
           
            <a v-for="(fmone,index) in jiazuRoomId.family_members" :key="index" class="flex-dire-row jiazu_one">
                <div style="margin-left: 0.462963rem;" class="jiazu_logo">
                    <img style="width:100%;height: 100%;" :src="fmone.user_image">
                </div>
                <div style="margin-left: 0.324074rem;font-size: 0.277778rem;">
                    <div class="flex-dire-row alignItems_center">
                        <span style="font-size: 0.518519rem;color: #333;">{{fmone.username}}</span>
                        <span class="zuzhang" v-if="fmone.type==1">族长</span>
                    </div>
                    <div :class="fmone.sex == 1?'flex-dire-row nan_s':'flex-dire-row nv_s'">
                        <img :src="fmone.sex == 1?'/static/image/nan.png':'/static/image/nv.png'" style="width: 0.324074rem;height: 0.324074rem;">
                    </div>
                </div>
            </a>

        </div>

        <router-link :to="{name:'shengqing_know',params:{familyId:jiazuRoomId.family_id}}" v-show="jiazuRoomId.state || 0===0" class="shengqing_join m0auto">
            <span>+</span>
            <span>申请加入</span>
        </router-link>
        <a @click="delFamily" v-show="jiazuRoomId.state || 0===1" style="background-color: #d1d1d1;" class="shengqing_join m0auto">
            <span>退出家族</span>
        </a>
    </div>
</template>

<script>
import getRequests from '../assets/js/common';
import { MessageBox,Toast } from 'mint-ui';
export default {
  data () {
    return {
      name:'jiazuRoomId',
      msg:'111',
      roomId:'',
      jiazuRoomId:{}
    }
  },
  mounted () {
    var that = this;
    that.roomId = that.$route.params.roomId;
    that.https.post(getRequests.getRequests.searchFamily,{keyword: that.roomId
      }).then(res => {
          console.log(res);
          that.jiazuRoomId = res.data[0];
	})
  },
  watch:{
    
  },
  methods:{
      delFamily(){
          MessageBox({
            title: '提示',
            message: '请，您确定申请退出这个家族?',
            showCancelButton: true
        }).then((res)=>{
            if(res === 'confirm'){
                // this.$router.push('/myLogin'); ouFamilyUrl
                this.https.get(getRequests.getRequests.outFamily,{
                    family_id:this.roomId
                }).then(res => {
                    console.log(res);
                    if(res.status === 200){
                        Toast({
                            message: res.msg,
                            position: 'bottom',
                            duration: 2000
                        });
                        this.$router.push({name:'applicationSuccess',params:{type:4}});
                    }else if(res.status ===400){
                        Toast({
                            message: res.msg,
                            position: 'bottom',
                            duration: 2000
                        });
                    }
                })
            }else if(res === 'cancel'){
                console.log('ccc')
            }
        })
      }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   body,html{
            background-color: #f5f5f5 !important;
        }
        
        .ss_kuang {
            width: 100%;
            height: 0.833333rem;
            background-color: #fff;
            align-items: center;
            border-radius: 0.416667rem;
            margin: 0.324074rem auto;
        }
        
        .ml20 {
            margin-left: 0.185185rem;
        }
        
        .id_style {
            font-size: 0.333333rem;
            height: 0.740741rem;
            align-items: center;
            color: #666666;
            justify-content: space-between;
        }
        
        .jiazu_one {
            width: 100%;
            height: 2.037037rem;
            align-items: center;
            font-size: 0.444444rem;
            color: #333;
            border-radius: 0.138889rem;
            background-color: #fff;
            margin-bottom: 0.324074rem;
        }
        
        .jiazu_one .jiazu_logo {
            width: 1.481481rem;
            height: 1.481481rem;
            border-radius: 100%;
            overflow: hidden;
        }
        
        .zuzhang {
            width: 0.833333rem;
            height: 0.509259rem;
            color: #fff;
            background-color: #6b6cf1;
            text-align: center;
            line-height: 0.509259rem;
            border-radius: 0.25463rem;
            margin-left: 0.185185rem;
        }
        
        .nan_s {
            width: 1.064815rem;
            height: 0.509259rem;
            align-items: center;
            justify-content: space-around;
            border-radius: 0.25463rem;
            color: #6b6cf1;
        }
        
        .nv_s {
            width: 1.064815rem;
            height: 0.509259rem;
            align-items: center;
            justify-content: space-around;
            border-radius: 0.25463rem;
            color: #ff4614;
        }
        
        .shengqing_join {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1.296296rem;
            line-height: 1.296296rem;
            background-color: #6b6cf1;
            text-align: center;
            font-size: 0.518519rem;
            color: #fff;
            z-index: 999999999;
        }
</style>
